<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body>
	<div layout:fragment="content">
	
		<style type="text/css">
			.col-md-3 {
				padding:5px ; 
				cursor: pointer;
			}	
			.col-md-3:hover {
				background-color: #FF4D3A;
				color: #FFF;
				text-decoration: none;
				border-radius:2px;
			}
			.col-click {
				background-color: #FF4D3A;
				color: #FFF;
				text-decoration: none;
				border-radius:2px;
			}
			.fontawesome-icon-list{
				padding:10px;
			}
			body{
				background-color:#f5f5f5 ; 	
			}
		</style>	
		
		<div class="container-fluid">
			<div class="animated fadeIn">
				<div class="row">
					<div class="col-lg-12">
						<div class="row fontawesome-icon-list"> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-address-book" aria-hidden="true"></i> address-book
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-address-book-o" aria-hidden="true"></i> address-book-o
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-address-card" aria-hidden="true"></i> Example of address-card
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-address-card-o" aria-hidden="true"></i> address-card-o
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-bandcamp" aria-hidden="true"></i> bandcamp
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-bath" aria-hidden="true"></i> bath
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-bathtub" aria-hidden="true"></i> bathtub 
							<span class="text-muted">(alias)</span>
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-drivers-license" aria-hidden="true"></i> drivers-license 
							<span class="text-muted">(alias)</span>
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-drivers-license-o" aria-hidden="true"></i> drivers-license-o 
							<span class="text-muted">(alias)</span>
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-eercast" aria-hidden="true"></i> eercast
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-envelope-open" aria-hidden="true"></i> envelope-open
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-envelope-open-o" aria-hidden="true"></i> envelope-open-o
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-etsy" aria-hidden="true"></i> etsy
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-free-code-camp" aria-hidden="true"></i> free-code-camp
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-grav" aria-hidden="true"></i> grav
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-handshake-o" aria-hidden="true"></i> handshake-o
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-id-badge" aria-hidden="true"></i> id-badge
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-id-card" aria-hidden="true"></i> id-card
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-id-card-o" aria-hidden="true"></i> id-card-o
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-imdb" aria-hidden="true"></i> imdb
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-linode" aria-hidden="true"></i> linode
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-meetup" aria-hidden="true"></i> meetup
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-microchip" aria-hidden="true"></i> microchip
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-podcast" aria-hidden="true"></i> podcast
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-quora" aria-hidden="true"></i> quora
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-ravelry" aria-hidden="true"></i> ravelry
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-s15" aria-hidden="true"></i> s15 
							<span class="text-muted">(alias)</span>
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-shower" aria-hidden="true"></i> shower
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-snowflake-o" aria-hidden="true"></i> snowflake-o
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-superpowers" aria-hidden="true"></i> superpowers
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-telegram" aria-hidden="true"></i> telegram
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-thermometer" aria-hidden="true"></i> thermometer 
							<span class="text-muted">(alias)</span>
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-thermometer-0" aria-hidden="true"></i> thermometer-0 
							<span class="text-muted">(alias)</span>
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-thermometer-1" aria-hidden="true"></i> thermometer-1 
							<span class="text-muted">(alias)</span>
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-thermometer-2" aria-hidden="true"></i> thermometer-2 
							<span class="text-muted">(alias)</span>
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-thermometer-3" aria-hidden="true"></i> thermometer-3 
							<span class="text-muted">(alias)</span>
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-thermometer-4" aria-hidden="true"></i> thermometer-4 
							<span class="text-muted">(alias)</span>
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-thermometer-empty" aria-hidden="true"></i> thermometer-empty
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-thermometer-full" aria-hidden="true"></i> thermometer-full
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-thermometer-half" aria-hidden="true"></i> thermometer-half
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-thermometer-quarter" aria-hidden="true"></i> thermometer-quarter
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-thermometer-three-quarters" aria-hidden="true"></i> thermometer-three-quarters
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-times-rectangle" aria-hidden="true"></i> times-rectangle 
							<span class="text-muted">(alias)</span>
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-times-rectangle-o" aria-hidden="true"></i> times-rectangle-o 
							<span class="text-muted">(alias)</span>
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-user-circle" aria-hidden="true"></i> user-circle
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-user-circle-o" aria-hidden="true"></i> user-circle-o
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-user-o" aria-hidden="true"></i> user-o
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-vcard" aria-hidden="true"></i> vcard 
							<span class="text-muted">(alias)</span>
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-vcard-o" aria-hidden="true"></i> vcard-o 
							<span class="text-muted">(alias)</span>
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-window-close" aria-hidden="true"></i> window-close
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-window-close-o" aria-hidden="true"></i> window-close-o
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-window-maximize" aria-hidden="true"></i> window-maximize
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-window-minimize" aria-hidden="true"></i> window-minimize
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-window-restore" aria-hidden="true"></i> window-restore
						   </div> 
						   <div class="fa-hover col-md-3 col-md-3">
							<i class="fa fa-wpexplorer" aria-hidden="true"></i> wpexplorer
						   </div> 
						  </div>	
					</div>
				</div>
			</div>
		</div>
	</div>
		
	<input type="hidden" id="selectResourceParentNode" />

	<script th:src="@{/asserts/vendors/jquery/js/jquery.min.js}"></script>
	<script type="text/javascript">
		$(function(){
			$("div.fa-hover").click(function(){
				var c = $(this).find("i").attr("class") ; 
				
				$(this).addClass("col-click") ; 
				$(this).siblings().removeClass("col-click");
				
				$("input[id=selectResourceParentNode]").attr("data-id" ,c) ; 
				$("input[id=selectResourceParentNode]").attr("data-name" ,c) ; 
			}) ;
		}) ;	 
	</script>
</body>
</html>
